<template>
  <div class="text-primary relative">
    <div class="!z-9 pt-100px flex flex-wrap justify-evenly relative">
      <div
        v-for="item in chainList"
        :key="item.id"
        @click="toPath(`/industry?id1=${item.categoryId}`)"
      >
        <OneItem v-if="item.imageExpansion === 2" :contain="item" />
        <FourItem v-else-if="item.imageExpansion !== 2" :contain="item" />
        <!-- <TItem v-else-if="item.imageExpansion === 4" :contain="item" /> -->
      </div>
    </div>
    <div class="h-150px overflow-hidden absolute top-0 left-0 w-full">
      <swiper
        :loop="true"
        class="home-swiper"
        :modules="[Navigation, Autoplay]"
        :autoplay="{ delay: 5000, disableOnInteraction: false }"
      >
        <swiper-slide v-for="(item, index) in banners" :key="index">
          <div class="bgSwiper pointer">
            <div></div>
            <img :src="item.imageUrl" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="mb-10px">
      <Banner title="热卖商品" :list="hotList" :rating="false" moreLink="/classificationDetails" />
    </div>
    <div class="mb-10px">
      <Banner title="品类推荐" :list="sortList" :rating="false" moreLink="/classificationDetails" />
    </div>
    <div class="mb-10px">
      <Banner title="今日特惠" :list="discountList" :rating="false" moreLink="/uc" />
    </div>

    <div class="!z-9 flex flex-wrap justify-evenly relative">
      <div v-for="item in chainList2" :key="item.id">
        <OneItem :contain="item" />
      </div>
    </div>
    <div class="mb-10px">
      <Banner
        title="Z划算 好价天天有"
        :list="discountList"
        :rating="false"
        moreLink="/classificationRelated"
      />
    </div>
    <div class="!z-9 flex flex-wrap justify-evenly relative">
      <div v-for="item in chainList3" :key="item.id">
        <OneItem :contain="item" />
      </div>
    </div>
    <div>
      <Banner title="猜你喜欢" :list="likeList" />
    </div>
  </div>
</template>

<script setup>
import { onActivated, ref, inject } from 'vue'
import { ad, GetHomeFindList } from '@/api/common'
import {
  GetHomeRecommendingCommodities,
  GetHomeGoodsSort,
  GetHomeDiscountGoods,
  GetHomeNavigation,
  GetHomeIndustryInfo,
  GetRecommendedProducts,
} from '@/api/bussiness'
import 'swiper/css'
import 'swiper/css/autoplay'
import 'swiper/css/navigation'
import { Autoplay, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import OneItem from './components/OneItem.vue'
import FourItem from './components/FourItem.vue'
import Banner from './components/banner.vue'
import Cookies from 'js-cookie'
import { useRouter } from 'vue-router'

const router = useRouter()
const banners = ref([])
const chainList = ref([])
const hotList = ref([])
const sortList = ref([])
const discountList = ref([])
const chainList2 = ref([])
const chainList3 = ref([])
const likeList = ref([])
const backToTop = inject('toTop')

const modules = [Navigation, Autoplay]

const init = async () => {
  ad(4).then((res) => {
    if (res.code === 20000) {
      banners.value = res.data
    }
  })
  GetHomeFindList().then((res) => {
    if (res.code === 20000) {
      // chainList.value = res.data
      res.data.forEach((item) => {
        if (item.imageExpansion !== 2) {
          item.images = JSON.parse(item.images)
          chainList.value.push(item)
        } else {
          chainList.value.push(item)
        }
      })
    }
  })
  GetHomeRecommendingCommodities({
    current: 1,
    size: 20,
    sellerId: 'all',
    isForward: 2,
  }).then((res) => {
    if (res.code === 20000) {
      hotList.value = res.data.records
    }
  })
  GetHomeGoodsSort().then((res) => {
    if (res.code === 20000) {
      res.data.forEach((item) => {
        item.image = item.mainImage
        sortList.value.push({ ...item, goodsName: item.name })
      })
    }
  })
  GetHomeDiscountGoods({
    current: 1,
    sellerId: 'all',
    size: 10,
    type: 2,
  }).then((res) => {
    if (res.code === 20000) {
      res.data.records.forEach((item) => {
        item.image = item.goodsChannelSpuDesc.mainImages
        discountList.value.push(item)
      })
    }
  })
  GetHomeNavigation(2).then((res) => {
    if (res.code === 20000) {
      chainList2.value = res.data
    }
  })
  GetHomeIndustryInfo({
    current: 1,
    size: 12,
  }).then((res) => {
    if (res.code === 20000) {
      chainList3.value = res.data.records
    }
  })
  GetRecommendedProducts().then((res) => {
    likeList.value = res.data
  })
}

const toPath = (path) => {
  backToTop()
  router.push(path)
}

init()

onActivated(() => {
  init()
})
</script>

<style lang="scss" scoped>
.bgSwiper {
  margin: 0 auto;
  height: 600px;
  position: relative;
}

.bgSwiper > img {
  display: flex;
}

.bgSwiper > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(#00000000, #eaeded);
}
</style>
